<template>
  <div @click="onClickBtn1">
    <h1>App1</h1>
<!--    <button v-on:click="counter += 1">Add 1</button>-->
    <button @click.stop.once.self="onClickBtn('add 1', '111', $event)">Add 1</button>
    <button @click.stop="onClickBtn('add 2', '222', $event)">Add 2</button>
    <p>The button above has been clicked {{ counter }} times.</p>
    <hr>
    <form @submit.prevent>
<!--      <input type="text" @keydown.shift.space="onInputChange" v-model="text">-->
      <input type="text" @keydown.13="onInputChange" v-model="text">
      <button @click.stop>submit</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "App1",
  data() {
    return {
      counter: 0,
      text: 'hahha'
    }
  },
  methods: {
    onInputChange() {
      console.log(this.text)
    },
    onClickBtn(t, e, event) {
      console.log(event)
      // console.log(t)
      // console.log(e)
      // console.log(this.$event)
      this.counter += 1
    },
    onClickBtn1() {
      console.log('app ======')
    }
  }
}
</script>

<style scoped>

</style>